<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2">
                            <div class="btns" @click="reLoadData">
                                <a-icon class="btns-icon" type="file-sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
        </div>
        <nly-content>
            <!-- 列表 -->
            <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 1000, y: 200}" :pagination="pagination"   @change="onTableChange" :loading="false">
                <div slot="orderTypeFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-radio-group v-model="postData.orderType" @change="onConditionChange" style="flex-direction: column;">
                        <a-radio :style="radioStyle" :value="null">
                        所有
                        </a-radio>
                        <a-radio :style="radioStyle" :value="1">
                            新购
                        </a-radio>
                        <a-radio :style="radioStyle" :value="2">
                            续费
                        </a-radio>
                    </a-radio-group>
                </div>
                <div slot="productionTypeFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-radio-group v-model="postData.productionType" @change="onConditionChange" style="flex-direction: column;">
                         <a-radio :style="radioStyle" :value="null">
                        所有
                        </a-radio>
                        <a-radio :style="radioStyle" value="baseProduction">
                        基础产品
                        </a-radio>
                        <a-radio :style="radioStyle" value="callSetting">
                        外呼套餐
                        </a-radio>
                        <a-radio :style="radioStyle" value="callAgent">
                        外呼坐席
                        </a-radio>
                    </a-radio-group>
                </div>
                <div slot="paymentTypeFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-radio-group v-model="postData.paymentType" @change="onConditionChange" style="flex-direction: column;">
                        <a-radio :style="radioStyle" :value="null">
                        所有
                        </a-radio>
                        <a-radio :style="radioStyle" :value="1">
                        包年
                        </a-radio>
                        <a-radio :style="radioStyle" :value="2">
                        包月
                        </a-radio>
                        <a-radio :style="radioStyle" :value="3">
                        一次性
                        </a-radio>
                    </a-radio-group>
                </div>
                <div slot="statusFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-radio-group v-model="postData.status" @change="onConditionChange" style="flex-direction: column;">
                        <a-radio :style="radioStyle" :value="null">
                        所有
                        </a-radio>
                        <a-radio :style="radioStyle" :value="0">
                        待支付
                        </a-radio>
                        <a-radio :style="radioStyle" :value="1">
                        处理中
                        </a-radio>
                        <a-radio :style="radioStyle" :value="2">
                        已取消
                        </a-radio>
                        <a-radio :style="radioStyle" :value="3">
                        交易成功
                        </a-radio>
                        <a-radio :style="radioStyle" :value="4">
                        已过期
                        </a-radio>
                        <a-radio :style="radioStyle" :value="400">
                        已废弃
                        </a-radio>
                    </a-radio-group>
                </div>
                <!-- 操作 -->
                <a slot="operation" slot-scope="text, record" >
                    <a-row>
                        <a-button type="primary" size="small" @click="goToDetail(record)">详情</a-button>
                        <a-button v-if="record.status === 0"  type="primary" size="small" @click="goToPay(record)" style="margin-left:5px;">继续支付</a-button>
                        <!-- <a-button v-if="record.status === 0"  type="primary" size="small" @click="goToPay(record)">继续支付</a-button>
                        <a-button v-if="record.status === 0"  type="primary" size="small" @click="goToPay(record)">继续支付</a-button>
                        <a-button v-if="record.status === 0"  type="primary" size="small" @click="goToPay(record)">继续支付</a-button> -->
                    </a-row>
                </a>
            </a-table>
        </nly-content>  
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import { pageList} from "@/api/expenses/businessOrder";

export default {
    data () {
        const columns = [
            {
                align: "left",
                title: "订单号",
                dataIndex: "businessOrderNo",
                width: 150,
            },
            
             {
                align: "left",
                title: "订单类型",
                dataIndex: "orderType",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case 1:showText = <sapn style="color:#028C10">新购</sapn>;break;
                        case 2:showText = <sapn style="color:#D38F0C">续费</sapn>;break;
                        case 3:showText = <sapn style="color:red">变更</sapn>;break;
                    }
                    return showText;
                },
                scopedSlots: {
                    filterDropdown: 'orderTypeFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
             {
                align: "left",
                title: "产品类型",
                dataIndex: "productionType",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case "baseProduction":showText = "基础产品";break;
                        case "callSetting":showText = "外呼套餐";break;
                        case "callAgent":showText = "外呼坐席";break;
                    }
                    return showText;
                },
                scopedSlots: {
                    filterDropdown: 'productionTypeFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
            {
                align: "left",
                title: "子产品名称",
                dataIndex: "productionName",
                width: 200,
            },
            {
                align: "center",
                title: "资费类型",
                dataIndex: "paymentType",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case 1:showText = "包年";break;
                        case 2:showText = "包月";break;
                        case 3:showText = "一次性";break;
                    }
                    return showText;
                },
                scopedSlots: {
                    filterDropdown: 'paymentTypeFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
            {
                align: "center",
                title: "单位时间",
                dataIndex: "timeUnit",
                width: 100,
            },
            {
                align: "center",
                title: "单位数量",
                dataIndex: "timeNumber",
                width: 100,
            },
            {
                align: "center",
                title: "单价",
                dataIndex: "price",
                width: 100,
            },
            {
                align: "left",
                title: "订单时间",
                dataIndex: "createTime",
                width: 120,
            },
            {
                align: "center",
                title: "状态",
                dataIndex: "status",
                width: 100,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case 0:showText = <span style="color:#CD0019;">待支付</span>;break;
                        case 1:showText = <span style="color:#BA7E0B;">处理中</span>;break;
                        case 2:showText = <span style="color:#110002;">已取消</span>;break;
                        case 3:showText = <span style="color:#028C10;">交易成功</span>;break;
                        case 4:showText = <span style="color:#110002;">已过期</span>;break;
                        case 400:showText = <span style="color:#110002;">已废弃</span>;break;
                    }
                    return showText;
                },
                scopedSlots: {
                    filterDropdown: 'statusFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
            {
                align: "center",
                title: "订单金额",
                dataIndex: "orderAmount",
                width:  100,
                customRender: (text, row, index) => {
                    let showText = text ?<span style="color:red;font-weight: 700;">{text}</span> : text;
                    return showText;
                },
            },
            {
                align: "center",
                title: "操作",
                dataIndex: "operation",
                width: 250,
                scopedSlots: { customRender: 'operation' },
            },

        ];
        return {
            postData: {
                status:null,
                page:{
                    "current": 1,
                    "size": 20
                }
            },
            pagination: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            data: [],
            columns,
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
        };
    },
    created(){
        this.reLoadData();
    },
    activated(){
        this.reLoadData();
    },
    mounted(){

    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    watch: {
    },
    methods: {
        //跳转到业务订单详情
        goToDetail (item) {
            this.$router.push(`/sys/orderDetail/${item.id}`)
        },
        reLoadData(){
            this.pageList();
        },
         //点击分页
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                page:{
                    size:pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //改变 分页大小
        changePageSize (e) {
            const value = e.target.value;
            Object.assign(this.postData, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList();
        },
         userSelection (keys, rows) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = rows;
        },
        //获取列表
        pageList () {
            const { postData } = this;
            pageList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    this.data.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
        //条件改变
        onConditionChange(){
            Object.assign(this.postData.page,{current:1});
            this.pageList();
        },
        //继续支付
        goToPay(record){

        }
    }
};
</script>
<style lang="less" scoped>
</style>